<template>
  <div class="message-header">
    <span class="message-role">{{ roleLabel }}</span>
    <span class="message-time">{{ formattedTime }}</span>
  </div>
</template>

<script setup>
import { computed } from 'vue'

const props = defineProps({
  roleLabel: { type: String, required: true },
  timestamp: { type: [Number, String, Date], default: null }
})

const formattedTime = computed(() => {
  if (!props.timestamp) return ''
  const date = new Date(props.timestamp)
  return date.toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' })
})
</script>

<style scoped>
@import '../index.css';
</style>


